<template>
	<div style="width: 100%; height: 100%">
		<div ref="echartsRef" class="echarts-content"></div>
		<el-button @click="changeData" color="#000" type="primary">
			修改数据
		</el-button>
	</div>
</template>

<script setup lang="ts">
import { useEchartsNeed } from "@/hooks/useEchartNeed";
import type { EChartsOption } from "echarts";
// 按需引用 echart组件
import { LineChart } from "echarts/charts";
import {
	TitleComponent,
	TooltipComponent,
	GridComponent,
	LegendComponent,
	ToolboxComponent,
} from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";

// 将需要的模块放入数组，传递给 hook
const requiredComponents = [
	TitleComponent,
	TooltipComponent,
	GridComponent,
	LegendComponent,
	ToolboxComponent,
	LineChart,
	CanvasRenderer,
];

const changeData = () => {
	option2.value.title = {
		text: "Line",
	};
	if (option2.value.series && Array.isArray(option2.value.series)) {
		// 类型守卫，确保 series 是一个数组
		// ECharts 的 series 可以是单个对象或数组，所以最好做个判断
		(option2.value.series[0] as { data: number[] }).data[0] = 500; 
	}
};

// 为 ref 明确指定泛型类型
const echartsRef = ref<HTMLElement>();
// 为 option 明确指定类型
const option: EChartsOption = {
	title: {
		text: "Stacked Line",
	},
	tooltip: {
		trigger: "axis",
	},
	legend: {
		data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
	},
	grid: {
		left: "3%",
		right: "4%",
		bottom: "3%",
		containLabel: true,
	},
	toolbox: {
		feature: {
			saveAsImage: {},
		},
	},
	xAxis: {
		type: "category",
		boundaryGap: false,
		data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
	},
	yAxis: {
		type: "value",
	},
	series: [
		{
			name: "Email",
			type: "line",
			stack: "Total",
			data: [120, 132, 101, 134, 90, 230, 210],
		},
		{
			name: "Union Ads",
			type: "line",
			stack: "Total",
			data: [220, 182, 191, 234, 290, 330, 310],
		},
		{
			name: "Video Ads",
			type: "line",
			stack: "Total",
			data: [150, 232, 201, 154, 190, 330, 410],
		},
		{
			name: "Direct",
			type: "line",
			stack: "Total",
			data: [320, 332, 301, 334, 390, 330, 320],
		},
		{
			name: "Search Engine",
			type: "line",
			stack: "Total",
			data: [820, 932, 901, 934, 1290, 1330, 1320],
		},
	],
};

const option2 = ref<EChartsOption>(option);

useEchartsNeed(echartsRef, option2 as Ref<EChartsOption>, requiredComponents);

</script>
<style scoped lang="less">
.echarts-content {
	width: 100%;
	height: 100%;
}
</style>
